<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>JQ筛选选择器</title>
    <script src="../../../../../lib/JQuery3.7.1.js"></script>
    <style>
        #d1{
            border: 1px solid black;
        }

    </style>
</head>
<body>
<ul>
    <li id="l1">1</li>
    <li id="l2"></li>
    <li id="l3"></li>
</ul>
<input type="text" id="in">
<div id="d1"></div>
<script>
    console.log('获取指定选择器中的第一个元素:')
    console.log($('li:first'))
    console.log('获取指定选择器中的最后一个元素:')
    console.log($('li:last'))
    console.log('获取索引等于1的元素:')
    console.log($('li:eq(1)'))
    console.log('获取索引大于1的元素:')
    console.log($('li:gt(1)'))
    console.log('获取索引小于2的元素')
    console.log($('li:Lt(2)'))
    console.log('获取索引为偶数的元素');
    console.log($('li:even'));
    console.log('获取索引为奇数的元素');
    console.log($('li:odd'));
    console.log('获取索引为1以外的所有li元素');
    console.log($('li:not(li:eq(1))'))
    window.onclick=function (){
        console.log('获取当前获得焦点的input元素')
        console.log($('#in:focus'))
    }
    //为d1添加动画
    $('#d1').animate({
        'width':'400',
        'height':'400'
    },1000)
    console.log('获取当前正在执行动画的div元素');
    console.log($('div:animated'));
</script>
</body>
</html>